import React from 'react'
import Highcharts from 'highcharts'
import { Spin, Breadcrumb } from 'antd'

//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
export default class signChart extends React.Component {
	constructor(props) {
        super(props)
        this.state = {
            loading:false,
            predicted:0,
            actual:0
        }
    }
     componentDidMount(){
    	this.setState({loading:true});
    	fetch(config.base+"attendance/select",{
                method: 'POST',
                mode: config.cors,
                headers: {'Content-Type':'application/x-www-form-urlencoded'},
                body:"id="+this.props.location.state
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                let data=rep.status==200?rep.result:null;
                let {predicted,actual}=data;
               this.setState({loading:false,predicted,actual}); 
               this.randerChart();
            })
            .catch((e)=>{
                console.log(e.message)
                message.error("网络错误")
                this.setState({loading:false});
            })
     
    }
    randerChart(){
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie',
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
            },
            title: {
                text: "签到结果"
            },
            credits: {
                enabled: false
            },
            series:[{
            type: 'pie',
            name: '签到结果',
            data: [
                {
                    name: '实到人数',
                    y: this.state.actual,
                    sliced: true,
                    selected: true
                },['应到人数',this.state.predicted]
            ]
        }],
            tooltip: {
                headerFormat: '{series.name}<br>',
            	pointFormat: '{point.name}: <b>{point.y}人</b>'
            },
            plotOptions: {
                pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    format: '<b>{point.name}</b>: {point.y}人',
	                    style: {
	                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	                    }
	                }
	            }
            },
        })
    }

    render() {
        return (
        	<Spin spinning={this.state.loading}>
	        	<Breadcrumb ><Breadcrumb.Item><a href="javascript:window.history.go(-1);">返回</a></Breadcrumb.Item></Breadcrumb>
	            <div id="container" className="chart-box">
	            </div>
	        </Spin>
        )
    }
}